<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../a.css" />
		<!-- 内部样式 -->
		<style>
			body{
				font: 12px "simhei",Arial, Helvetica, sans-serif;
				color: #666;
			}
			div{
				width: 198px;
				height: 233px;
				background-color: #e8e8e8;
				text-align: center;
				/*div设置居中
				所有子元素都会继承下去居中
				但是块级元素独占一行，元素的文本内容会受继承的居中影响
				行内元素内容受继承的居中影响,并且元素自身受上级元素居中影响后元素本身会居中
				 (元素内容居中了,元素自身也居中了)
				
				*/
			}
			.title_p{
				margin: 0 0 6px 0;
			}
			.price_p{
				color:#0aa1ed;
				font-weight: bold;
				margin: 6px 0;;
			}
			a{
				width: 100px;
				height: 24px;
				background-color: #aa1ed;
				/*行内块受上级元素居中影响，元素自身会居中，内容也继承了居中*/
				display: inline-block;
				color: white;
				text-decoration: none;
				line-height: 24px;
				border-radius: 3px;
			}
		</style>
	</head>
	<body>
	
		<div>
			<img width="100%" height="60%" src="https://img14.360buyimg.com/n0/jfs/t1/196630/15/5446/416457/60b89870E4fd71d0e/d9eb46967109cd2a.jpg" alt="" />
			<p class="title_p">戴尔(DELL)游匣G15 15.6英寸游戏笔记本电脑(八核i7 16G 512G RTX3060显卡 165Hz 100%sRGB高色域)耀夜黑</p>
			<p class="price_p">￥6499.00</p>
			<a href="">查看详情</a>
		</div>
	</body>
</html>
